<template>
    <div class="password-edit">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="1rem" :label-position="'left'"
                 class="form">
            <el-form-item label="旧密码" prop="oldPassword">
                <el-input placeholder="请输入旧密码" v-model="ruleForm.oldPassword" type="password"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input placeholder="请填写密码(6-18位数字/字母组合 可包含字符)" v-model="ruleForm.newPassword"
                          type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="newPasswordAgain">
                <el-input placeholder="请确认新密码" v-model="ruleForm.newPasswordAgain" type="password"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" class="submit" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    const sha256 = require('js-sha256').sha256
    export default {
        data() {
            let _this = this, RegExp = /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,18}$/,
                validatePassword = (rule, value, callback) => {
                    if (!RegExp.test(value)) {
                        callback(new Error('密码格式错误 密码中必须包含数字与字母'))
                    } else {
                        callback()
                    }
                }, validatePass = (rule, value, callback) => {
                    if (value !== _this.ruleForm.newPassword) {
                        callback(new Error('两次输入密码不一致!'))
                    } else {
                        callback()
                    }
                }
            return {
                ruleForm: {
                    oldPassword: '',
                    newPassword: '',
                    newPasswordAgain: ''
                },
                rules: {
                    oldPassword: [
                        {required: true, message: '请填写旧密码', trigger: 'blur'}
                    ],
                    newPassword: [
                        {required: true, message: '请填写新密码', trigger: 'blur'},
                        {min: 6, message: '密码应不少于6位字符', trigger: 'blur'},
                        {validator: validatePassword, trigger: 'blur'}
                    ],
                    newPasswordAgain: [
                        {required: true, message: '请确认密码', trigger: 'blur'},
                        {min: 6, message: '密码应不少于6位字符', trigger: 'blur'},
                        {validator: validatePass, trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
        },
        methods: {
            validate(formName, callback) {
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            submitForm(formName) {
                this.validate('ruleForm', () => {
                    this.$http.post('/index/modifyPassword', {
                        passwordOld: sha256(this.ruleForm.oldPassword),
                        password: sha256(this.ruleForm.newPassword)
                    }).then(result => {
                        if (result.success) {
                            this.$method.messageBox('alert', '密码修改成功')
                            this.$refs.ruleForm.resetFields()
                        }
                    })
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .password-edit {
        padding: .6rem;

        .form {
            width: 5rem;
        }
    }
</style>
